<template>
  <div class="table-search-page">
    <a-card class="g-mt-10" :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :form="form" :selfUpdate="true">
          <a-row :gutter="12">
            <a-col :md="12" :lg="6" :sm="12" style="padding: 0 4px;">
              <a-form-item label="预约时间">
                <a-range-picker v-model="tegistrationTime" style="width: 100%;" @change="timeSearchChange">
                  <a-icon slot="suffixIcon" type="calendar"/>
                </a-range-picker>
              </a-form-item>
            </a-col>
             
            <a-col :md="2" :lg="4" :sm="12">
              <div class="table-page-search-submitButtons g-flex" style="margin-bottom: 4px;">
                <!-- <a-icon :type="advanced ? 'up' : 'down'" @click="advanced=!advanced" style="margin-right: 15px;"/> -->
                <a-button type="primary" @click="clickSearch">查询</a-button>
                <a-button style="margin-left: 8px" @click="clickReset">重置</a-button>
              </div>
            </a-col>
          </a-row>
       
        </a-form>
      </div>
    </a-card>
 
    <a-card :bordered="false" class="settlement-form-table">
       
      <a-tabs default-active-key="1" @change="tabsChange">
        <a-tab-pane key="1" tab="手术预约"> 
          <a-button type="primary" @click="surgicalAppointmentAdd()" class="btn-style-add">新增</a-button>
          <super-table 
            :scroll="{ x: 1000 }"
            ref="table"
            :rowKey="(record,index)=> index"
            :columns="columns"
            :data="loadData"
            :bordered="false"
            style="margin-top:10px;"
          > 
            <!--序号-->
            <template slot="index" slot-scope="text,record,index">
              <span>{{(queryParam.pageNum-1)*queryParam.pageSize+(index+1)}}</span>
            </template>
            <!-- 状态 -->
            <span slot="status" slot-scope="text">
              <a-tag :color="text == '待审核' ? '#39f' : 'green'">
                {{ text }}
              </a-tag>
            </span> 

            <!-- 项目 -->
            <template slot="treatmentName" slot-scope="text">
              <div v-html="text" style="text-align:left">{{text}}</div>
            </template>

            <template slot="cardNo" slot-scope="text,record">
              <div class="g-color g-f-14" style="cursor: pointer;" @click="toCustomerDetails(text,record)">{{ text }}</div>
            </template>
            <template slot="action" slot-scope="text,record">
              <div style="margin:0 auto">
                <a-button v-if="record.status != '有效'" class="not-border-btn-style" style="padding:0;" type="link" @click="SAhandEdit(record)" >修改</a-button>

                <a-button v-if="record.status == '有效'" class="not-border-btn-style" style="padding:0;" type="link" @click="SAhandDetail(record)" >详情</a-button>

                <a-popconfirm title="作废该项数据?" @confirm="() => handRemove(record)">
                  <a style="font-size:14px">作废</a>
                </a-popconfirm>
                
             
              </div>
            </template>
 
          </super-table>

        </a-tab-pane>
        <a-tab-pane key="2" tab="到院预约" > 
          <a-button type="primary" @click="consultationAppointmentAdd()" class="btn-style-add">新增</a-button>
          <super-table 
            :scroll="{ x: 500 }"
            ref="table2"
            :rowKey="(record,index)=> index"
            :columns="columns2"
            :data="loadData"
            :bordered="false"
            style="margin-top:10px;"
          > 
            <!--序号-->
            <template slot="index" slot-scope="text,record,index">
              <span>{{(queryParam.pageNum-1)*queryParam.pageSize+(index+1)}}</span>
            </template>
            <!-- 状态 -->
            <span slot="status" slot-scope="text">
              <a-tag :color="text == '待审核' ? '#39f' : 'green'">
                {{ text }}
              </a-tag>
            </span> 

            <!-- 项目 -->
            <template slot="treatmentName" slot-scope="text">
              <div v-html="text" style="text-align:left">{{text}}</div>
            </template>

            
            <template slot="cardNo" slot-scope="text,record">
              <div class="g-color g-f-14" style="cursor: pointer;" @click="toCustomerDetails(text,record)">{{ text }}</div>
            </template>
            <template slot="action" slot-scope="text,record">
              <div  style="margin:0 auto">
         
                <a-button v-if="record.status != '有效'" class="not-border-btn-style" style="padding:0;" type="link" @click="CAhandEdit(record)" >修改</a-button>

                <a-button v-if="record.status == '有效'" class="not-border-btn-style" style="padding:0;" type="link" @click="CAhandDetail(record)" >详情</a-button>
 
 

                <a-popconfirm title="作废该项数据?" @confirm="() => handRemove(record,1)">
                  <a style="font-size:14px">作废</a>
                </a-popconfirm>
                 
              </div>
            </template>
          </super-table>
        </a-tab-pane>
         
      </a-tabs> 
       

    </a-card>
    <!-- 手术预约 --> 
    <surgical-appointment ref="surgicalAppointment" :row_record="current_row_record" />

    <!-- 预约到院 -->
    <consultation-appointment ref="consultationAppointment" :row_record="current_row_record" />

    <!-- 手术预约--查看详情 -->
    <surgical-detail ref="surgicalDetail" :row_record="current_row_record"/>
     

    <!--项目抽屉--弹窗--> 

    
  </div>
</template>

<script>  
// import {GetScheduleList,KillSchedule} from '@/api/modular/main/customer/cashier'
import {GetScheduleList,KillSchedule} from '@/api/modular/main/bookingManagement/bookingManagement'
import { SuperTable, upTime } from '@/components' 
import consultationAppointment from '@/views/bookingManagement/appointmentRecord/components/consultationAppointment'
import surgicalAppointment from '@/views/bookingManagement/appointmentRecord/components/surgicalAppointment'
import surgicalDetail from '@/views/bookingManagement/appointmentRecord/components/surgicalDetail.vue'
import moment from 'moment' 
 
export default {
  components: {
    SuperTable,
    upTime, 
    consultationAppointment,
    surgicalAppointment,
    surgicalDetail
  },
   
  data() {
    return {
      
      dataSource:[],
      loadData: parameter => {
        this.queryParam.pageNum = parameter.pageNum
        this.queryParam.pageSize = parameter.pageSize
        return GetScheduleList(this.queryParam).then(res => {
          this.loading = false//关闭加载 
          this.dataSource = [...res.rows]
          let newData = Object.assign({},res)
          return newData
        })
      },
      form: this.$form.createForm(this), 
      advanced: false, // 高级搜索 展开/关闭
      disabled: true, //是否禁用新增按钮
      current_row_record: {},
      columns: [ 
        { title: '序号', scopedSlots: { customRender: 'index' }, align: 'center', width: 80, fixed: 'left' },
        { title: '顾客卡号', align:'center', dataIndex: 'cardNo', width: 140, ellipsis: true }, 
        { title: '顾客姓名', align:'center', dataIndex: 'customerName', width: 140, ellipsis: true }, 
        { title: '状态', align:'center', dataIndex: 'status', scopedSlots: { customRender: 'status' }, width: 140, ellipsis: true },
        { title: '预约时间', align:'center', dataIndex: 'scheduleDate', width: 140, ellipsis: true }, 
        { title: '提交人', align:'center', dataIndex: 'creator', width: 140, ellipsis: true },
        { title: '提交时间', align:'center', dataIndex: 'createTime', width: 140, ellipsis: true }, 
        
        
        { title: '预约项目', align:'center',scopedSlots: { customRender: 'treatmentName' }, dataIndex: 'treatmentName', width: 200 }, 
        { title: '预约医生', align:'center', dataIndex: 'expertName', width: 140, ellipsis: true }, 
        { title: '所属客管', align:'center', dataIndex: 'zxName', width: 140, ellipsis: true }, 
        { title: '麻醉类型', align:'center', dataIndex: 'hoCusSel', width: 140, ellipsis: true }, 
        { title: '检查结果', align:'center', dataIndex: 'isCheck', width: 140, ellipsis: true }, 
        { title: '费用情况', align:'center', dataIndex: 'isMoney', width: 140, ellipsis: true }, 
        { title: '备注', align:'center', dataIndex: 'memo', width: 140, ellipsis: true },  
        { title: '操作', align:'center', scopedSlots: { customRender: 'action' }, align:'center', width: 120, fixed: 'right' } 
      ],
      columns2: [ 
        { title: '序号', scopedSlots: { customRender: 'index' }, align: 'center', width: 80, fixed: 'left' },
        { title: '顾客卡号', align:'center', dataIndex: 'cardNo', width: 140, ellipsis: true }, 
        { title: '顾客姓名', align:'center', dataIndex: 'customerName', width: 140, ellipsis: true },  
        { title: '状态', align:'center', dataIndex: 'status', scopedSlots: { customRender: 'status' }, width: 140, ellipsis: true },
        { title: '预约时间', align:'center', dataIndex: 'scheduleDate', width: 140, ellipsis: true }, 
        { title: '提交人', align:'center', dataIndex: 'creator', width: 140, ellipsis: true },
        { title: '提交时间', align:'center', dataIndex: 'createTime', width: 140, ellipsis: true }, 
        
        { title: '预约项目', align:'center',scopedSlots: { customRender: 'treatmentName' }, dataIndex: 'treatmentName', width: 200 }, 
        { title: '预约医生', align:'center', dataIndex: 'expertName', width: 140, ellipsis: true }, 
        { title: '所属客管', align:'center', dataIndex: 'zxName', width: 140, ellipsis: true },  
        { title: '备注', align:'center', dataIndex: 'memo', width: 140, ellipsis: true },  
        { title: '操作', align:'center', scopedSlots: { customRender: 'action' }, align:'center', width: 120, fixed: 'right' } 
      ],
      data: [],
      pagination: {
        current: 1,//当前页
        pageSize: 10,//当前页数
        total: 0,//总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30'],//这里注意只能是字符串，不能是数字
        showTotal: total => `共有 ${total} 条数据`//分页中显示总的数据
      },
      // 查询参数
      queryParam: {
        pageNum: 1,//第几页
        pageSize: 10,//每页中显示数据的条数
        current:1,
        type: 1,
        begintime: undefined,
        endtime: undefined,
        chargeType:1,
        reportType: 2
      },
      loading: true, //加载状态,
      current_row_index: '',  
      
 
      // 时间
      gettime:'',
     
 
      watchBool:false,
      tegistrationTime: [],

      tabsKeys: 1,

      

    }
  },
  created() {
    // this.clickArrearsCharge()
    this.getBaseFormInfo()
    // this.$nextTick(()=>{
    //   this.$refs.depositCharge.show()
    // })
  },
  watch:{
    watchBool(){
      this.queryParam.pageNum = 1
      this.queryParam.pageSize = 10
      this.queryParam.current = 1
      this.queryParam = Object.assign({},this.queryParam)
      console.log(this.queryParam)
      
    }
  },
  methods: { 
    
    timeSearchChange(date,day){
      console.log(day)
      this.tegistrationTime = day
    },
    // tabs 切换
    tabsChange(tab,index){
      this.queryParam.pageNum = 1
      this.queryParam.pageSize = 10
      this.queryParam.current = 1
      this.queryParam = Object.assign({},this.queryParam)

      this.tabsKeys = tab

      console.log(tab)
      if(tab == 1){
        this.queryParam.reportType = 2
        this.queryParam.type = 1
        this.loadData = (parameter) => {
          this.queryParam.pageNum = parameter.pageNum
          this.queryParam.pageSize = parameter.pageSize
          return GetScheduleList(this.queryParam).then(res => {
            this.loading = false//关闭加载 
            this.dataSource = [...res.rows]
            let newData = Object.assign({},res)
            return newData
          }) 
        }
        this.$nextTick(() => {
          this.$refs.table.refresh()
        })
      }else if(tab == 2){
        // 支付方式  
        this.queryParam.reportType = 1
        this.loadData = (parameter) => { 
          this.queryParam.pageNum = parameter.pageNum
          this.queryParam.pageSize = parameter.pageSize
          return GetScheduleList(this.queryParam).then(res => {
            this.loading = false//关闭加载 
            this.dataSource = [...res.rows]
            let newData = Object.assign({},res)
            return newData
          })
        }
        this.$nextTick(() => {
          this.$refs.table2.refresh()
        })
      } 
      
      
    },
    // 手术预约--新增点击按钮事件
    surgicalAppointmentAdd(){
      console.log('111')
      this.$refs.surgicalAppointment.show()
    },
    // 到院预约 -- 新增点击按钮事件
    consultationAppointmentAdd(){
      console.log('222') 
      this.$refs.consultationAppointment.show()
    },
    
    
    // 作废
    handRemove(record,type = ''){
      console.log(record)
      let sendData = {
        schedulerReportId: record.tbSchedulerId,
        clientId: record.customerId,
        type: type
      }
      KillSchedule(sendData).then(res => {
        if(res.code == 200){
          this.$message.success(res.data)
          if(this.tabsKeys == 1){
            this.$refs.table.loadData()
          }else{
            this.$refs.table2.loadData()
          }
          
        }else{
          this.$message.error(res.message)
        }
      }) 
    },
    // 到院预约-- 记录 编辑
    CAhandEdit(record){
      console.log(record)
      this.current_row_record=record
      this.$nextTick(() => {
        this.$refs.consultationAppointment.show('edit')
      })
    },
    CAhandDetail(record){
      console.log(record)
      this.current_row_record=record
      this.$nextTick(() => {
        this.$refs.consultationAppointment.show('edit','detail')
      })
    },
    // 手术预约-- 记录 编辑
    SAhandEdit(record){
      console.log(record)
      this.current_row_record=record
      this.$nextTick(() => {
        this.$refs.surgicalAppointment.show('edit')
      })
    },
    // 手术预约--记录 查看详情
    SAhandDetail(record){
      this.current_row_record=record
      this.$nextTick(() => {
        this.$refs.surgicalDetail.show()
      })
    },
   
    
     

    // 获取当前的日期
    getCurrentTime() {
      //获取当前时间并打印
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth()+1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
      _this.gettime = yy+'/'+mm+'/'+dd+' '+hh+':'+mf+':'+ss; 
    },




    checkPattern(str) {
      const pattern = new RegExp('[\u4E00-\u9FA5]+')
      if (pattern.test(str)) {
        return true
      }
      return false
    },
     

    moment,
    toCountDown(time) {
      //1000代表1秒，1000*60代表60分钟
      return Date.now() + parseInt(time) * 1000
    },
    minutesToSeconds(time) {
      return parseInt(time)
    },
   
    //点击查询-高级搜索
    clickSearch() { 
      this.watchBool = !this.watchBool
      this.queryParam.pageNum = 1
      this.queryParam.pageSize = 10
      this.queryParam.current = 1

      let form_values = {}
      const time = this.tegistrationTime
      console.log(time)
      if (time && time.length > 0 && time[0] != '' && time[1] !='') {
        form_values.beginTime = moment(time[0]).format('YYYY-MM-DD')
        form_values.endTime = moment(time[1]).format('YYYY-MM-DD') 
      }else{
        form_values.beginTime = undefined
        form_values.endTime = undefined
      }
      
      
      this.queryParam = Object.assign(this.queryParam,form_values)

       
      this.$nextTick(() => {
        if(this.tabsKeys == 1){
          this.$refs.table.loadData()
        }else{
          this.$refs.table2.loadData()
        }
         
      })
     
      
      
    },
    clickReset() {
      let form_values = {}
      this.tegistrationTime = [] 
      form_values.beginTime = undefined
      form_values.endTime = undefined 
      this.queryParam = Object.assign(this.queryParam,form_values)  
    },
     
   
     
    //点击查看客户详情
    toCustomerDetails(text, record) {
      // console.log(record)
      this.$router.push({
        path: 'customer_details', query: {
          id: record.customerId,
          card_no: record.cardNo,
          customerName:record.customerName
        }
      })
    },
    
    
    // 表格行点击事件
    clickRow(record, index) {
      return {
        on: {
          click: () => {
            // console.log('点击当前行',record)
            this.disabled = false
            this.current_row_index = index
            this.current_row_record = record
          }
        }
      }
    },
    //获取表单相关接口
    getBaseFormInfo() {
      
    }
  }

}
</script>

<style lang="less" scoped>

.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
  margin-bottom: 2px;
}

.currentRowClass {
  background: #e6f7ff;
}

/deep/ .ant-tabs-bar {
  // border-bottom: none;
  border-bottom: 1px solid #e8e8e8;
}

/deep/ .ant-badge-count, .ant-badge-dot, .ant-badge .ant-scroll-number-custom-component {
  right: -10px;
}
  
/deep/ .settlement-form-table{ 
  .ant-table-small.ant-table-bordered .ant-table-fixed-right{
    border-left: 0 !important;
    border-right: 0 !important;
  }
}
/deep/ .btn-style-add{
  margin-top: 20px;
}
/deep/ .not-border-btn-style,
/deep/ .not-border-btn-style:hover{
  font-size: 14px;
  border: 0;
  line-height: 5px;
  border-color: rgba(255, 255, 255, 0) !important;
}
 

</style>